
<template>
    <div class="app-container">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList"></search-form>
        <!-- 表格开始 -->
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="id" label="id" align="center"></el-table-column>
                
                <el-table-column prop="name" label="广告名称" align="center"></el-table-column>
                <el-table-column prop="url" label="广告图片" align="center">
                     <template slot-scope="scope">
                         <table-img :src="scope.row.url"></table-img>
                    </template>
                </el-table-column>
                <el-table-column prop="typeMessage" label="广告类型" align="center"></el-table-column>
                <el-table-column prop="name" label="有效时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.startTime && $normalTime(scope.row.startTime)+ '-' || ''}}{{scope.row.endTime && $normalTime(scope.row.endTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{$normalTime(scope.row.createTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="">
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="deletes(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogAdvertisingPicture ref="ad"></dialogAdvertisingPicture>
    </div>
</template>

<script>
import elTable from "@/components/xForm/elTable";
import dialogAdvertisingPicture from "./dialogAdvertisingPicture"; //编辑框
import apisAd from "@/api/shopDecoration/ad"; //广告图片接口
export default {
    name: "advertisingPicture",
    components: {
        elTable,
        dialogAdvertisingPicture,
        apisAd,
    },
    data() {
        return {
            searchArray: [
                {
                    type: 'input',
                    placeholder: '请输入标题名称',
                    value: '',
                    label: '标题名称',
                    key: 'name'
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '类型',
                    key: 'type',
                    list: [
                        {
                            label: '首页',
                            value: 'SLIDESHOW'
                        },
                        {
                            label: '顶部置顶条',
                            value: 'TOPBAR'
                        }
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '显示状态',
                    key: 'status',
                    list: [
                        {
                            label: '显示',
                            value: 'display'
                        },
                        {
                            label: '隐藏',
                            value: 'hide'
                        }
                    ]
                },
            ],
            searchObj: {
                name: '',
                parentId: ''
            },
            formData: {
                currentPage: 1,
                pageSize: 10,
                data: [
                ],
                total: 0
            },
            dataInfo: [],
        };
    },
    created () {
        this.getList()
    },
    methods: {
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {formData: {currentPage, pageSize}, searchObj} = this
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for ( let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.store.getAdvList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        addOrUpdate(row) {
            // 新增/修改
            this.$refs.ad.open(row);
        },
        deletes(row) {
            // 删除
            apisAd.delete(this, row.id, (d) => {
                this.getList();
            });
        },
        changeSwitch(e, row) {
            apisAd.enable(this, row, (d) => {
                this.getList();
            });
        },
    },
};
</script>

